<template>
	<view>
		<view v-if="loading">
			<loading></loading>
		</view>
		<view v-else class="container">
			<view class="detail-top">
				<image src="/static/images/error.png" mode=""></image>
				<text>错题记录</text>
				<text class="count">{{total}}道</text>
				<text>练习错题有助于提高考试通过率哦</text>
			</view>
			<view class="detail-body" v-if="list">
				<view class="subject-item"  v-for="(item,index) in list" :key="index" >
					<uni-title class="title" type="h3" title="答题详情"></uni-title>
					<view class="title-view"><text class="quesType">{{item.subject.choicesType == 0 ? '单选':item.subject.choicesType == 3 ? '多选' : item.subject.choicesType == 2 ? '判断' :''}}</text><text class="question">{{resHtml(item.subject.subjectName)}}</text></view>
					<view class="answer-list" v-if="item.subject.choicesType == 3">
						<checkbox-group >
							<view class="answer-desc"  v-for="(item2,index2) in item.subject.options" :key="index2">
								<checkbox :value="item2.optionName"  color="#FF9A50;" disabled :checked="item2.isChecked" :class="item2.isAnswer?'xuanzhong':''"></checkbox>
								<text>{{item2.optionName}}:{{resHtml(item2.optionContent)}}</text>
							</view>
						</checkbox-group>
					</view>
					<view class="answer-list" v-else>
						<radio-group >
							<view class="answer-desc"  v-for="(item2,index2) in item.subject.options" :key="index2">
								<radio :value="item2.optionName"  color="#FF9A50;" disabled :checked="item2.optionName === item.subject.answer.answer" :class="item2.optionName == item.answer?'daan':''"></radio>
								<text>{{item2.optionName}}:{{resHtml(item2.optionContent)}}</text>
							</view>
						</radio-group>
					</view>
					<view class="answer-view">
						<view>
							答案 
							<text class="true">{{item.subject.answer.answer}}</text> 
							您选择 
							<text v-if="item.answer == item.subject.answer.answer" class="true">{{item.answer}} 回答正确</text>
							<text v-else  class=" true false">{{item.answer}} 回答错误</text>
						</view>
					</view>
					<view class="analysis" v-if="item.subject.analysis">
						<text class="quesType">答案解析</text>
						<text class="jiexi"> {{resHtml(item.subject.analysis)}}</text>
					</view>
				</view>

			</view>
			<view class="load-more">
				<uni-icons v-if="loadShow" type="spinner-cycle" size="30"></uni-icons>
				<text  v-if="botShow">已经到底了</text>
			</view>
		</view>
		</view>
</template>

<script>
		import loading from '@/components/loading/loading'
		import {findErrorAnswer} from '@/api/exam/exam'
	export default {
		data() {
			return {
				list:[],
				id:null,
				detail:null,
				loadShow:false,
				botShow:false,
				loading:true,
				total:0,
				pageForm:{
					pageNo:1,
					pageSize:10,
					studentId:uni.getStorageSync('studentId'),
					answerType:1
				},
			}
		},
		created() {
			this.getList()
		},
		methods: {
			checked(index) {
				this.isActive = index
			},
			onReachBottom(){
				if(!this.botShow){
					this.loadShow = true
					this.pageForm.pageNo ++ ;
					this.getList()
				}
			},
			getList(){
				findErrorAnswer(this.pageForm).then(res => {
					this.detail = res.data.list
					this.total = res.data.total
					if(this.detail.length >0){
						let item = {}
						for (let i = 0; i < this.detail.length; i++) {
							console.log('i',i)
							//判断多选题是否选中
							if( this.detail[i].subjectDto.choicesType == 3){
								let answer = this.detail[i].subjectDto.answer.answer
								if(answer != null && answer != ''){
									for (let t = 0; t <  this.detail.answers[i].subjectDto.options.length; t++) {
										console.log('t',t)
										this.detail[i].subjectDto.options[t].isChecked = answer.indexOf(this.detail[i].subjectDto.options[t].optionName)!= -1?true:false
										this.detail[i].subjectDto.options[t].isAnswer = this.detail[i].answer.indexOf(this.detail[i].subjectDto.options[t].optionName) != -1?true:false
									}
									this.detail[i].answer = this.detail[i].answer.replace(new RegExp(",","g"),"")
								}
								this.detail[i].subjectDto.answer.answer = this.detail[i].subjectDto.answer.answer.replace(new RegExp(",","g"),"")
							}
							this.list.push({subject:this.detail[i].subjectDto,answer:this.detail[i].answer})
						}
						this.loadShow = false
					}else{
						this.loadShow = false
						this.botShow = true
					}
					//this.list = res.data.answers
					
					this.loading = false
				}).catch(() =>{
					
				})
			},
			resHtml(item){
				return item.replace(/<[^>]+>/g, '')// 去掉所有的html标记
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: #FFFFFF;
	}
	.container{
		width: calc(100vw - 60rpx);
		margin: 30rpx auto;
		.detail-top{
			background: #FFFFFF;
			box-shadow: 0px 2px 34px 5px rgba(156,193,220,0.25);
			border-radius: 5px;
			display: flex;
			justify-content: space-around;
			align-items: center;
			font-size: 12px;
			font-family: Inter-Light, Inter;
			color: #5E5E5E;
			padding: 20px 10px;
			text{
				line-height: 24px;
			}
			 image{
				width: 20px;
				height: 20px;
			}
			.count{
				color: #FF9A50 ;
				padding-right: 20px;
			}
		}
		.detail-body{
			.subject-item{
				margin-top: 30rpx;
				background: #FFFFFF;
				box-shadow: 0px 2px 34px 5px rgba(156,193,220,0.25);
				border-radius: 10px 10px 10px 10px;
				opacity: 1;
				padding: 0 20px;
				border-bottom: 1px solid #EBEBEB;
				.title{
					padding: 15px 0;
					font-size: 14px;
					font-family: Inter-Bold, Inter;
					font-weight: bold;
					color: #474A49;
				}
				.question{
					display: inline-block;
					font-size: 28rpx;
					font-weight: bold;
					font-family: Inter-Bold, Inter;
				}
			}
			.title-view{
				display: flex;
			}
			.quesType{
				display: inline-block;
				color: #fff;
				padding: 3px 5px;
				background: #FF9A50;
				border-radius:4px;
				margin-right: 10px;
				font-size: 10px;
				font-family: Inter-Medium, Inter;
				font-weight: 500;
				height: 16px;
				min-width: 24px;
			}
			.answer-list{
				padding-left:40px ;
				margin-bottom: 20rpx;
				.answer-desc{
					text{
						line-height: 100rpx;
						padding-left: 10rpx;
					}
					
				}
			}
			.answer-view{
				background: #FFEBDC;
				border-radius: 10rpx;
				font-size: 28rpx;
				font-family: Inter-Regular, Inter;
				font-weight: 400;
				color: #000;
				padding: 20rpx 30rpx;
				.true{
					padding: 0rpx 16rpx;
					color: #508CFF;
				}
				.false{
					color: #F26D6D;
				}
			}
			.analysis{
				margin: 50rpx;
			}
			/deep/ .daan .uni-radio-input:before{
				font: normal normal normal 14px/1 uni;
				content: "×";
				color: #fff;
				font-size: 24px;
				position: absolute;
				top: 25%;
				left: 50%;
				transform: translate(-50%,-48%) scale(.85);
				-webkit-transform: translate(-50%,-48%) scale(.85);
			}
			/deep/ .daan .uni-radio-input{
				background-color: #F26D6D;
			}
			/deep/ .xuanzhong .uni-checkbox-input{
				background-color: #F26D6D;
			}
			/deep/ .xuanzhong .uni-checkbox-input:before{
				font: normal normal normal 14px/1 uni;
				content: "×";
				color: #fff;
				font-size: 24px;
				position: absolute;
				top: 25%;
				left: 50%;
				transform: translate(-50%,-48%) scale(.85);
				-webkit-transform: translate(-50%,-48%) scale(.85);
			}
			/deep/ .uni-radio-input{
				width: 32rpx;
				height: 32rpx;
				border: #FF9A50 2px solid;
			}
			
			/deep/ .uni-radio-input-checked{
				background-color: #508CFF !important;
				border-color:  #508CFF !important;
			}
			/deep/ .uni-checkbox-input{
				width: 32rpx;
				height: 32rpx;
				border: #FF9A50 2px solid;
			}
			/deep/ .uni-checkbox-input-checked{
				background-color: #508CFF !important;
				border-color:  #508CFF !important;
			}
			/deep/ .uni-radio-input-checked:before{
				content: "\EA08" !important;
				font-size: 18px !important;
				transform: translate(-50%,-48%) scale(.73) !important;
				-webkit-transform: translate(-50%,-48%) scale(.73) !important;
			}
			/deep/ .uni-checkbox-input-checked:before{
				content: "\EA08" !important;
				font-size: 18px !important;
				transform: translate(-50%,-48%) scale(.73) !important;
				-webkit-transform: translate(-50%,-48%) scale(.73) !important;
			}
		}
		.load-more{
			display: block;
			padding: 20px;
			margin: 0 auto;
			text-align: center;
		}
	}

</style>